<template>
    <view :style="{ height: mescrollHeight }">
        <edu-mescroll-uni
            :top="globNavbarHeight + globStatusBarHeight + 'px'"
            @init="mescrollInit"
            @down="refresh"
            @up="getUser"
        >
            <view class="user_content">
                <view class="user_item" v-for="(i, index) in courseListUser" :key="index">
                    <edu-image
                        borderRadius="40"
                        height="80"
                        width="80"
                        :src="i.avatar_url"
                    ></edu-image>
                    <view class="user_name">{{ i.nick_name | filName }}</view>
                    <view class="getMoney u-line-1">贡献收益：{{ i.sum | formatCurrency }}</view>
                </view>
            </view>
        </edu-mescroll-uni>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            courseListUser: [],
        }
    },
    filters: {
        filName(val) {
            if (val.length > 8) {
                return val.substring(0, 8) + '...'
            } else {
                return val
            }
        },
    },
    computed: {
        ...mapGetters({
            globNavbarHeight: 'projectSetting/globNavbarHeight',
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
        globWindowHeight() {
            return this.$u.sys().windowHeight
        },
        mescrollHeight() {
            let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
            return `${height}px`
        },
    },
    methods: {
        // 下拉刷新
        refresh() {
            this.mescroll.resetUpScroll()
        },
        getUser(page) {
            this.$edu.api.getUserIncomeUser().then((res) => {
                const { data } = res
                let list = data.data
                let total = data.total

                if (page.num == 1) this.courseListUser = []
                this.courseListUser = this.courseListUser.concat(list)
                this.mescroll.endBySize(list.length, total)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.user_content {
    width: 100%;

    .user_item {
        height: 144rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user_name {
            font-size: 30rpx;
            color: #303133;
            margin-left: 30rpx;
        }

        .getMoney {
            width: 45%;
            text-align: right;
            height: 42rpx;
            font-size: 30rpx;
            color: #f54030;
            margin-left: 5%;
            font-weight: bold;
        }
    }
}
</style>
